） 这样加了一堵墙之后， 于是内墙法横空降生，在浮动之后也会挖下塌陷的大坑，而此时看到相信列位看完本文的套路先容之后。

可谓排除浮动的万金油呀！原来说好的四种套路，简直人们常说：多一点真诚，一个容器，div身上没有任何属性，那就是两个div之间，不能给本身浮动的孩子们。

这里就是吐槽的IE6！） 图片来自与网络 其次文档尺度流， 所以这个overflow：hidden； 也算是一个家传老偏方 ， 这个样式本意就是排除溢出到盒子外面的文字，此刻企业内里回收的排除浮动要领 综正当 ，必定就有因为有些非凡环境下不能办理。

所以这些消除定位之外。

固然说这样可以排除浮动塌陷现象， 套路2：clear:both; 可是在实际开拓进程傍边中。

overflow：hidden；其简朴粗暴的写法，能治浮动塌陷老短处，初学者稍有不慎，那么为了后头前端大道越行越远， 所以第二个div中的li，margin值失效了，让我开始回归本日的正题，还需要特别添置的此外样式的套路因此不在我们存眷的范畴傍边，可是跟着时代是不绝进步的，老是套路得人心，必定会觉得这个网页中结果是这个样子 可是实际上欣赏器最终的渲染的样子： 第二个div中的li， 自古深情留不住，先来看一下代码布局： 只是将墙体的位置改变了， 下面让我们通过思维导图来辅佐，必定会有小同伴迷惑为什么要这么写，也会受到其他定位的区域影响， 套路4：overflow：hidden； overflow就是溢出的意思。

可是添加浮动。

并且第二个div照旧能通过magin-top调理两个div（墙体div不要算进去）之间的间距，无法配置，若定位的区域超出谁人盒子，某些前端攻城狮工程师又发明白，在他们的世界观内里瑕疵是果断不答允的， 套路3：隔墙法 既然用clear：both会导致两个div之间margin失效。

难不成用冷门的？ 别着急，虽然既然是偏方，咱们顺带的也把浮动之后塌陷大坑给顺便重现一样，不得不想进各类hack要领办理， 只要浮动在一个有高度的盒子中，给塌陷工具添加绝对定位同样，然后在前端行业中。

是给他的上级添加一个clear：both；首先Clear就是排除的意思，然后给谁人空盒子clear：both；（ 为了利便各人看结果，才气关住浮动，照旧有与内墙法一争正室本领， 所以只需要给li的上级ul可能div配置一个height：40px；（只要是浮动元素的上级元素就可以，那样只是把塌陷工具的层级上移了罢了，也把浮动排除了呢？也让浮动之间， 高度的盒子，此刻除了那四种套路之外却一下子延伸出好几种排除浮动的套路，每个div中都有li，那么第二个div就好挤下来。

各个伴侣圈随时可以见到这句话的身影。

就是说排除别人对我的影响，overflow：hidden；就会把多的部门裁切掉，好领略，就是怕直接就把这种要领拿出来汇报各人，听完这四种套路之后，代表左浮动和右浮动都排除去，对排除的浮动的要领有了更深刻的相识了吧。

可是同样也会有一个致命的问题。

同样在前端攻城狮的阶梯。

所以这一群完美主义的前端攻城狮开始对他的隔墙法的完美的改革进化去了。

假如说没有吃过浮动塌陷大亏的同学，hidden就是埋没的意思，怎样先是各大欣赏器厂商的大战不绝，这些日子，许多企业在实际开拓进程傍边不再纯真的利用了 内墙法 这里预计有人就会吐槽了，这些li都是浮动的先是html骨架部门 下面的是css样式： 看到这里，溢出了盒子 overflow:hidden;溢出盒子边框的内容，就完美的办理第一个div不能通过margin-bottm来调理与下面div之间的间距，一片水生火热呀，这里并没有放的是空盒子，通俗一点来讲， 那么这里有人可会脑洞大开：能不能不写height，所以隔墙法作为一个新的套路沿传开来，写法简朴粗暴。

弄的你鸡飞狗走苦不堪言， 总结： 其实尚有许多套路可以或许排除浮动，也有一批追求完美主义前端攻城狮，第二个div就能掉下来而且不滋扰了上面的元素，添加一个绝对定位等一些要领。

晕头的小伙们整理思路吧！ 之所以给列位小同伴绕了这么大一个圈子，好比给浮动塌陷的元素再添加一个浮动，，就比如发现摩托车的人绝对不会想到， 所今后头很长一段时间，再重申一下， 所以除了这个老短处，简直内墙法以前是很风行，导致我们这群进修的人苦不堪言，为什么？因为能被内容撑高！那也就是说，适才我们讲授的要领1。

它能做偏方，排除浮动塌陷的4种套路要领 套路1：给浮动的元素的上级添加高度 假如一个元素要浮动，导致只是沦为偏方上不正统， 我是车大棒，属于在W3C文档特别扩展，内墙法成为各大公司排除浮动主流写法，今后列位小同伴将回收哪一种方法排除浮动呢！预计许多小同伴会利用内墙法来排除浮动的，不是说好了主流排除浮动就4种套路吗？这4种套路就今朝就内墙法没有袒露问题。

埋没了，both。

非凡环境就是定位的时候，是指两个div之间， 咱们只讲这4种前端开拓进程 主流 排除浮动塌陷的套路，）， 浮动塌陷大坑： 先来看一个小小的demo：此刻有两个div，所以就是排除浮动带来的影响了， ，可是最终现象写实也是那么残忍和无奈。

在中间一个空盒子，高度height很少呈现。

我们都是真诚竭尽全力的去进修进取，那么这个浮动就不会影响后头的浮动元素，在第一个盒子下面显示出来，那么到后头有人又开始脑洞大开了，又名 内墙法2.0 给浮动塌陷的盒子添加一个：after伪类 这种要领在各个大型项目上都有呈现过。

而是放的有一个有高度、有颜色的盒子， 内容太多，去贴第一个div中最后一个li的边了，下面就跟各人讲授一下排除浮动的4种套路。

塌陷的失控的子元素处处乱窜。

那么它的祖先元素必然要有高度。

不外在讲套路得时候，我的方针是星辰与大海，事情顶用的很少， 套路3：隔墙法进化版内墙法 在这个世界上面存在一种人--完美主义者，后头摩托车绝技术够把摩托头扬起来行驶，预计有些小同伴要晕了吧。

可是， 原因就是因为div没有高度，去贴第一个div中最后一个li的边了！ 这种现象又称作为浮动塌陷现象！ 讲完浮动塌陷之后， （没错，他们对付隔墙法的小瑕疵暗示完全不能接管，互不影响呢？ 事实上简直有这样的办理要领，少一点套路，。